<script setup>
  import { ref } from 'vue'

  // 规范要定义好，推荐（页面名称-事件名称），不然，由于是全局事件，事件名称可能会在页面之间互相冲突
  uni.$on('test-eventchannel-list-edit-ok', (newUser) => {
    console.log(newUser, 'newUser')
    const oldUser = users.value.find((v) => v.id === newUser.id)
    Object.assign(oldUser, newUser)
  })

  const users = ref([])

  for (let i = 0; i < 100; i++) {
    users.value.push({ id: i + 1, name: '张三-' + (i + 1) })
  }

  const goEdit = (user) => {
    console.log(user, 'user')
    uni.navigateTo({
      url: '/pages/test-eventchannel-edit/test-eventchannel-edit?id=' + user.id,
      // success(e) {
      //   // 事件通道实例
      //   e.eventChannel.on('edit-ok', (newUser) => {
      //     // 这个回调函数何时触发？等会在编辑页面触发，编辑页面想要触发，首先需要拿到事件通道实例
      //     console.log(newUser, 'newUser')
      //     const oldUser = users.value.find((v) => v.id === newUser.id)
      //     Object.assign(oldUser, newUser)
      //   })
      // },
    })
  }

  // const updateUser = (newUser) => {
  //   const index = users.value.findIndex((v) => v.id === newUser.id)
  //   users.value.splice(index, 1, newUser)
  // }

  // 在Vue3中用来暴露属性和方法，暴露在组件实例上
  // Tips1：H5 -> 只能通过 ref 获取组件实例的方式去访问
  // Tips2：小程序 -> 获取当前页面实例.$vm.xxx 的方式访问
  // defineExpose({ updateUser })
</script>

<!-- 
<script>
  // 通过选项式API添加的属性和方法，可以使用页面实例访问
  export default {
    methods: {
      sayHi() {
        console.log('hi~', this)
        // sayHi中 访问不了 <script setup> 中定义的 users
        
      },
    },
  }
</script>
 -->

<template>
  <view v-for="v of users" :key="v.id">
    {{ v }}, <button type="default" @click="goEdit(v)">编辑</button>
  </view>
</template>

<style></style>
